<template>
  <div>
      <table class="table">
        <thead>
          <tr>
            <th v-for="item in listTitle" :key="item">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in listPage" :key="item.order">
            <td>{{item.order}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.major}}</td>
          </tr>
        </tbody>
      </table>
      <m-page @mpage-topage="updatePage" :page-size="pageSize" :data-sum="listData.length" :page="page"></m-page>
    </div>
</template>


<script>

import MPage from './Mpage.vue'

export default {
  name: 'MTable',
       props: ['listTitle', 'listData'],
      template: '#mtable',
      components: {
         MPage
      },
      data () {
        return {
          page: 2,
          pageSize: 3,
        }
      },
      computed: {
        listPage() {
          let offset = (this.page - 1) * this.pageSize;
          return this.listData.slice(offset, offset + this.pageSize);
        }
      },
      methods: {
        updatePage(p) {
          this.page = p;
        }
      },
}
</script>
